<template>
    <div class="containter">
        <div>
            <el-card>
                <filterComponent v-model:filter-data="filterData" @doSearch="handleSearch" />
            </el-card>
        </div>
        <el-card class="mg-t-20">
            <tableComponent class="set-height" :table-header="tableHeader" :table-data="tableData"
                v-model:page-info="pageInfo" @pageChange="handlePageChange">
                <template #type>
                    <el-table-column label="方案类型" prop="type">
                        <template #default="scope">
                            <span>
                                {{ setTypeName(scope.row.type) }}
                            </span>
                        </template>
                    </el-table-column>
                </template>
                <template #wesureScope>
                    <el-table-column label="保障范围" prop="wesureScope" width="300">
                        <template #default="scope">
                            <template v-if="scope.row.wesureScope">
                                <!-- <span v-for="(i, index) in JSON.parse(scope.row.wesureScope)" :key="index">
                                    {{ i }}
                                </span> -->
                                {{ JSON.parse(scope.row.wesureScope).join('，') }}
                            </template>
                        </template>
                    </el-table-column>
                </template>
                <!-- <template #settings>
                    <el-table-column fixed="right" label="操作" width="120">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click="handleShowAdd(scope.row)">修改</el-button>
                            <el-button link type="danger" size="small" @click="handleRemove(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </template> -->
            </tableComponent>
        </el-card>
    </div>
    <addIndustry v-model:show="showAdd" :type="addType" :cur-item="curItem" @success="getList" />
</template>
<script setup>
import { ref, computed, onMounted, onActivated } from 'vue'
import { ElMessage } from 'element-plus'
import { getPlanList, getInsureComponyList, getSolutionList } from 'api/insure/longTerm.ts'
import filterComponent from '@/components/filterComponent/index.vue'
import tableComponent from '@/components/tableComponent/index.vue'
import addIndustry from './components/dialog/addIndustry.vue'

const addType = ref('add')
const curItem = ref({})
const filterData = ref({
    list: {
        insureCompanyType: {
            name: '保司',
            prop: 'insureCompanyType',
            value: '',
            placeholder: '请选择保司',
            type: 'select',
            options: [],
            defaultAttrs: {
                label: 'dictLabel',
                value: 'dictValue'
            },
            handleFocus: (item) => {
                if (item.options?.length) return
                getInsureComponyList().then(res => {
                    item.options = res
                })
            },
            handleChange: (item) => {
                filterData.value.list.planCode.value = ''
                filterData.value.list.planCode.options = []
            }
        },
        planCode: {
            name: '方案名称',
            prop: 'planCode',
            value: '',
            placeholder: '请选择方案名称',
            type: 'select',
            options: [],
            defaultAttrs: {
                label: 'dictLabel',
                value: 'dictValue'
            },
            handleFocus: (item) => {
                if (!filterData.value.list.insureCompanyType.value) {
                    ElMessage.warning({
                        message: '请先选择保司'
                    })
                    return
                } else {
                    if (item.options?.length) return
                    getSolutionList({
                        insureCompany: filterData.value.list.insureCompanyType.value
                    }).then(res => {
                        item.options = res
                    })
                }
            }
        },
    },
    buttonList: [
        // {
        //     icon: 'Plus',
        //     name: '新增行业',
        //     click: () => {
        //         addType.value = 'add'
        //         showAdd.value = true
        //         curItem.value = {}
        //     }
        // }
    ]
})

const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

const tableHeader = ref([
    {
        label: '保司',
        prop: 'insureCompanyName',
        width: 100
    },
    {
        label: '方案类型',
        prop: 'type',
        width: 100
    },
    {
        label: '保险方案',
        prop: 'planName',
        width: 200
    },
    {
        label: '备注',
        prop: 'remark',
        width: 100
    },
    {
        label: '保障范围',
        prop: 'wesureScope',
        width: 300
    },
    {
        label: '3类',
        prop: 'price',
        width: 100
    },
    {
        label: '4类',
        prop: 'priceFour',
        width: 100
    },
    {
        label: '5类',
        prop: 'priceFive',
        width: 100
    },
    {
        label: '3类(按月)',
        prop: 'monthPrice',
        width: 100
    },
    {
        label: '4类(按月)',
        prop: 'monthPriceFour',
        width: 100
    },
    {
        label: '5类(按月)',
        prop: 'monthPriceFive',
        width: 100
    },
    {
        label: '3类(老用户)',
        prop: 'oldMonthPrice',
        width: 100
    },
    {
        label: '4类(老用户)',
        prop: 'oldMonthPriceFour',
        width: 100
    },
    {
        label: '5类(老用户)',
        prop: 'oldMonthPriceFive',
        width: 100
    },
    {
        label: '生效年月',
        prop: 'effectYearMonth',
        width: 100
    },
    {
        label: '3类成本费',
        prop: 'costPrice',
        width: 100
    },
    {
        label: '4类成本费',
        prop: 'costPriceFour',
        width: 100
    },
    {
        label: '5类成本费',
        prop: 'costPriceFive',
        width: 100
    },
    {
        label: '3类成本费(按月)',
        prop: 'monthCostPrice',
        width: 130
    },
    {
        label: '4类成本费(按月)',
        prop: 'monthCostPriceFour',
        width: 130
    },
    {
        label: '5类成本费(按月)',
        prop: 'monthCostPriceFive',
        width: 130
    }
])

const setTypeName = computed(() => {
    return (type) => {
        const map = {
            1: '日日保',
            2: '长期保',
            3: '按月保单',
            4: '即时生效',
            5: '团意日保'
        }
        return map[type]
    }
})

const showAdd = ref(false)

const tableData = ref([])

const handleSearch = () => {
    getList()
}

const handlePageChange = () => {
    getList()
}

const createQuery = () => {
    const data = {}
    for (const key in filterData.value.list) {
        data[filterData.value.list[key].prop] = filterData.value.list[key].value
    }
    return data
}

const getList = () => {
    getPlanList({
        ...createQuery(),
        pageNum: pageInfo.value.pageNum,
        pageSize: pageInfo.value.pageSize
    }).then(res => {
        tableData.value = res.rows
        pageInfo.value.total = res.total
    })
}

const handleShowAdd = (item) => {
    addType.value = 'update'
    showAdd.value = true
    curItem.value = item
}

const handleRemove = (item) => {
    ElMessageBox.confirm(
        `是否确认删除行业名为"${item.name}"的数据项?`,
        '提示',
        {
            type: 'warning',
        }
    )
        .then(() => {
            removeIndustry({
                id: item.id
            }).then(res => {
                ElMessage.success({
                    message: '删除成功'
                })
                getList()
            })
        })
}

onMounted(() => {
    getList()
})
onActivated(() => {
    getList()
})
</script>
<style lang="scss" scoped>
.containter {
    padding: 16px;
}
</style>